<template>
<!-- <scroll-view  @scrolltolower="loadMore"  class="scrollPage" :scroll-y="true"> -->
<!-- </scroll-view> -->
<!-- 排行榜 -->
<StarRank :ref="el => rankDom['star']=el" v-if="user.mode===1"/>
<TalentRank :ref="el => rankDom['talent']=el" v-else />
</template>

<script setup>
import { reactive } from 'vue'
import { useUserStore } from "@/stores";
import { useDidShow, setNavigationBarTitle, useReachBottom } from '@tarojs/taro'
import StarRank from '@/components/Rank/Star'
import TalentRank from '@/components/Rank/talent'
// import Tabbar from '@/components/Tabbar'
// const StarRank = defineAsyncComponent(() => import('@/components/Rank/Star'))
// const TalentRank = defineAsyncComponent(() => import('@/components/Rank/talent'))

const user = useUserStore()
const rankDom = reactive({})
useDidShow(() => {
  setNavigationBarTitle({
    title: `${user.mode===1? '达人': '摄影师'}榜单`
  })
})
useReachBottom(()=>{
    console.log('触发底部')
    const str = (user.mode===1 ? 'star' : 'talent')
    rankDom[str].loadMore()
})
</script>
